<template>
  <div class="all-login">
    <div class="left-login">
      <img src="../../assets/imgs/login3.jpg" alt="" />
      <div class="right-login">
        <h1>后台管理系统</h1>
        <el-form
          :model="loginForm"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          size="mini"
          class="demo-ruleForm"
        >
          <el-form-item class="yhm" label="用户名：" prop="username">
            <el-input
              type="text"
              v-model="loginForm.username"
              autocomplete="off"
              placeholder="请输入用户名/手机号/邮箱"
              @keyup.native.enter="submitForm('ruleForm')"
            >
            </el-input>
          </el-form-item>

          <el-form-item class="mm" label="密码：" prop="password">
            <el-input
              :type="flag ? 'password' : 'text'"
              v-model="loginForm.password"
              autocomplete="off"
              placeholder="请输入密码"
              prefix-icon="iconfont icon-mima"
              @keyup.native.enter="submitForm('ruleForm')"
            >
              <template #suffix>
                <i
                  class="iconfont point"
                  :class="flag ? 'icon-eyes' : 'icon-eyes-'"
                  @click="flag = !flag"
                >
                </i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item class="dl">
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              :loading="isClick"
            >
              登 录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// 在 vue 中，@/ 代表从根目录 src 开始
import { login } from '@/api/users.js'
import { getNewRoutes } from '../../router/index.js'

export default {
  data() {
    var validateusername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatepassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ validator: validateusername, trigger: 'blur' }],
        password: [{ validator: validatepassword, trigger: 'blur' }]
      },
      flag: true,
      isClick: false
    }
  },
  methods: {
    submitForm(formName) {
      this.flag = true
      // this.$refs this.$router this.$route this.$emit
      // this.$refs - 在 vue 中获取 DOM 里的 id  validate - 校验
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.isClick = true
          // 校验通过，可以发请求
          // 这种简便写法是因为 return 里面的数据跟云掌柜里面的数据是一样的
          // const {username, password} = this.loginForm
          // login(this.loginForm).then((res) => {
          //   console.log(res)
          // })
          // async 和 await 只能在一个函数中使用 - ES6 使用管理异步的新语法
          // 这里的 this.loginForm 可以直接引用，因为 return 里面的数据跟云掌柜里面的数据是一样的
          const { code, msg, data } = await login(this.loginForm)
          if (code === 1) {
            // element-ui 提供了一个页面的提示组件
            this.$message.success(msg) // 固定格式
            window.localStorage.setItem('users', JSON.stringify(data))
            setTimeout(() => {
              getNewRoutes()
              this.$router.push('/')
            }, 1500)
          } else {
            this.isClick = false
            this.$message.error(msg)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.all-login {
  height: 100%;
  background: #11052a;
  display: flex;
  justify-content: center;
  align-items: center;
  .left-login {
    width: 1200px;
    height: 100%;
    // background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right-login {
      width: 280px;
      height: 280px;
      // background-color: #ffffff;
      box-shadow: 0 0 4px;
      h1 {
        text-align: center;
        color: #ffffff;
        font-weight: normal;
        letter-spacing: 6px;
      }
      .el-form {
        width: 260px;
        .dl {
          margin-top: 30px;
        }
      }
    }
  }
}
</style>
